<template>
	<div>
		<el-drawer
			v-model="drawerVisible"
			class="drawer-class"
			modal-class="drawer-modal-class"
			:size="size"
			:show-close="false"
			:close-on-press-escape="false"
			:close-on-click-modal="false"
			:before-close="beforeClose"
		>
			<template #header="{ titleId, titleClass }">
				<h4 :id="titleId" :class="[titleClass, 'title']">{{ title }}</h4>
				<el-icon @click="handleCancel"><CloseBold /></el-icon>
			</template>

			<!-- 主体默认插槽 -->
			<slot></slot>

			<template #footer v-if="showBtn">
				<slot name="footer">
					<el-button
						v-if="showSubmit"
						:disabled="disabledSubmit"
						:type="disabledSubmit ? 'info' : 'primary'"
						@click="handleSubmit"
						>{{ submitText }}</el-button
					>
					<el-button type="primary" @click="handleConfirm" :disabled="canClick" :loading="isLoading">{{ confirmText }}</el-button>
					<el-button @click="handleCancel">{{ cancelText }}</el-button>
				</slot>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup name="DrawerComp">
const emit = defineEmits(["confirm", "cancel", "submit"]);
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	showBtn: {
		type: Boolean,
		default: true
	},
	showSubmit: {
		type: Boolean,
		default: false
	},
	disabledSubmit: {
		type: Boolean,
		default: false
	},
	canClick: {
		type: Boolean,
		default: false
	},
	size: {
		type: [Number, String],
		default: 960
	},
	title: {
		type: String,
		default: "标题"
	},
	submitText: {
		type: String,
		default: "提交"
	},
	confirmText: {
		type: String,
		default: "保存"
	},
	cancelText: {
		type: String,
		default: "取消"
	},
	isLoading: {
		type: Boolean,
		default: false
	}
});

const drawerVisible = computed({
	get() {
		return props.visible;
	},
	set() {}
});

const beforeClose = () => {
	emit("cancel", "keepAlive");
};
const handleSubmit = () => {
	emit("submit");
};
const handleConfirm = () => {
	emit("confirm");
};
const handleCancel = () => {
	emit("cancel", "reset");
};
</script>

<style lang="scss" scoped>
:deep(.el-overlay.drawer-modal-class) {
	--el-overlay-color-lighter: rgba(0, 0, 0, 0.2);
	top: 56px;
	height: calc(100% - 56px);
}

:deep(.el-drawer.drawer-class) {
	border-radius: 12px 0px 0px 12px;
	.el-drawer__header {
		padding: 25px 20px;
	}
	.el-drawer__body {
		padding: 24px 20px;
	}
	.el-drawer__footer {
		padding: 24px 45px;
		text-align: left;
		.el-button {
			line-height: 36px;
			padding-left: 23px;
			padding-right: 23px;
		}
	}
}

.el-icon {
	cursor: pointer;
}

.title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #666666;
}

.title::before {
	display: block;
	content: "";
	margin-right: 10px;
	width: 4px;
	height: 18px;
	background: #6283ef;
}
</style>
